<template>
  <div class="chat-box">
    <div class="chat-main scrollable" id="chat-main">
      <div v-if="listData.length>0" style="min-height: calc(100% - 120px);">
        <div v-for="(item, index) in listData" :key="index" >
          <div v-if="item.role == 'user'">
            <div class="flex-3 chat-user-box">
              <div class="chat-user actvie">
                {{ item.conversationContent }}
              </div>
            </div>
          </div>
          <div v-else>
            <assistantChat :conversation-content="item.conversationContent" :think-text="item.reasoningContent">
            </assistantChat>
          </div>
        </div>
      </div>
      <div v-else style="width: 100%;height: calc(100% - 120px);">

      </div>
      <sendMessage :parent-id="parentId" @update="update" @updateUser="updateUser"></sendMessage>
    </div>
  </div>

  <el-button class="fixt-buttom" type="primary" @click="gobuttom" v-if="top > 50">
    <el-icon>
      <ArrowDownBold />
    </el-icon>
  </el-button>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted, nextTick, watch } from "vue";
import { getConversationList } from "@/api/chat";
import { chatMeeages, chatMeeagesList } from "@/types/chat.type";
import assistantChat from "@/components/chat/assistantChat.vue";
import sendMessage from "@/components/chat/sendMessage.vue";
import "highlight.js/styles/github.css";
import "highlight.js/styles/paraiso-light.css";
import { initChat, initConversationGroup, smoothScrollToBottom } from "@/utils";
import { useChatStoreWithOut } from "@/store/modules/chat";
import { useAppStoreWithOut } from "@/store/modules/app";
const appstore = useAppStoreWithOut();
const chatStore = useChatStoreWithOut();
const top = ref<number>();
const conversationGroupId = ref<number>();
const listData = ref<Array<chatMeeages>>([]);
const parentId = ref(0);
watch(
  () => chatStore.getCurrentConversationGroupId,
  (v) => {
    if (v) {
      conversationGroupId.value = v;
      GetList();
    }else {
      listData.value = []
      conversationGroupId.value = 0
    }
  }
);
const updateUser = (data: chatMeeages) => {
  listData.value.push(data);
};
const update = (data: chatMeeages) => {
  const uid = data.uuid;
  const d = listData.value[listData.value.length - 1];
  if (d.uuid != uid) {
    listData.value.push(data);
  } else {
    listData.value.splice(listData.value.length - 1, 1, data)
  }
};
const GetList = async () => {
  const { list, total } = await getConversationList<chatMeeagesList>({
    conversationGroupId: conversationGroupId.value,
  });
  listData.value = list;
  if (list.length > 0) {
    parentId.value = list[list.length - 1].id;
  }
  gobuttom();
};

const gobuttom = async () => {
  await nextTick();
  setTimeout(() => {
    smoothScrollToBottom("chat-main");
  }, 500);
};

let timer = null;
const statListenerTop = (e: any) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    top.value = e.target.scrollTop;
  }, 500);
};

onMounted(() => {
  document
    .getElementById("chat-main")
    .addEventListener("scroll", statListenerTop);
  // s.value = str.content
  initChat(appstore.getSlefUsetInfo)
  initConversationGroup()
});
onUnmounted(() => {
  document
    .getElementById("chat-main")
    .removeEventListener("scroll", statListenerTop);
});
// let data = ref<chatData>({
//   sessionId: "",
//   content: "",
//   reasoning_content: "",
//   total_tokens: 0,
//   thinking_time: 0,
// });
</script>
<style lang="scss" scoped>
.fixt-buttom {
  position: fixed;
  right: 20px;
  bottom: 120px;
}

.chat-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.chat-user-box {
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 16px;
  display: flex;
  position: relative;
}

.chat-user {
  color: #262626;
  padding: calc((44px - var(--font-line-height)) / 2) 20px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #eff6ff;
  border-radius: 14px;
  max-width: calc(100% - 48px);
}

.chat-main {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  padding: 10px 10%;
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
}
</style>
